<template>
  <div class="bg-gray-100 min-h-screen py-4">
    <div class="container mx-auto">
      <div class="bg-white rounded-lg p-6">
        <h1 class="text-2xl font-medium mb-6">购物车</h1>
        
        <!-- 空购物车提示 -->
        <div v-if="!cartStore.items.length" class="text-center py-12">
          <div class="w-24 h-24 mx-auto mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-full h-full text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <p class="text-gray-500 mb-4">购物车是空的</p>
          <router-link to="/products" 
                      class="inline-block px-6 py-2 bg-[#FF4400] text-white rounded hover:bg-[#F22D00]">
            去购物
          </router-link>
        </div>
        
        <!-- 购物车商品列表 -->
        <div v-else>
          <!-- 表头 -->
          <div class="grid grid-cols-12 gap-4 pb-4 border-b text-gray-500 text-sm">
            <div class="col-span-6">商品信息</div>
            <div class="col-span-2 text-center">单价</div>
            <div class="col-span-2 text-center">数量</div>
            <div class="col-span-2 text-center">小计</div>
          </div>
          
          <!-- 商品列表 -->
          <div class="divide-y">
            <div v-for="item in cartStore.items" 
                 :key="item.id"
                 class="grid grid-cols-12 gap-4 py-4 items-center">
              <!-- 商品信息 -->
              <div class="col-span-6">
                <div class="flex gap-4">
                  <img :src="item.image" 
                       :alt="item.title"
                       class="w-20 h-20 object-contain">
                  <div>
                    <h3 class="text-sm line-clamp-2 mb-2">{{ item.title }}</h3>
                    <button @click="cartStore.removeFromCart(item.id)"
                            class="text-sm text-gray-500 hover:text-[#FF4400]">
                      删除
                    </button>
                  </div>
                </div>
              </div>
              
              <!-- 单价 -->
              <div class="col-span-2 text-center">
                <span class="text-sm">¥{{ item.price.toFixed(2) }}</span>
              </div>
              
              <!-- 数量控制 -->
              <div class="col-span-2 flex justify-center">
                <div class="flex items-center border rounded">
                  <button @click="cartStore.updateQuantity(item.id, item.quantity - 1)"
                          :disabled="item.quantity <= 1"
                          class="px-3 py-1 border-r hover:bg-gray-100 disabled:opacity-50">-</button>
                  <input type="number" 
                         :value="item.quantity"
                         @input="e => cartStore.updateQuantity(item.id, Number(e.target.value))"
                         class="w-12 px-2 py-1 text-center focus:outline-none">
                  <button @click="cartStore.updateQuantity(item.id, item.quantity + 1)"
                          class="px-3 py-1 border-l hover:bg-gray-100">+</button>
                </div>
              </div>
              
              <!-- 小计 -->
              <div class="col-span-2 text-center text-[#FF4400]">
                ¥{{ (item.price * item.quantity).toFixed(2) }}
              </div>
            </div>
          </div>
          
          <!-- 结算区域 -->
          <div class="flex justify-between items-center mt-6 pt-6 border-t">
            <div class="flex items-center gap-4">
              <span class="text-gray-500">共 {{ cartStore.totalItems }} 件商品</span>
            </div>
            <div class="flex items-center gap-6">
              <div class="text-sm">
                合计: <span class="text-2xl font-bold text-[#FF4400]">¥{{ cartStore.totalAmount.toFixed(2) }}</span>
              </div>
              <button class="px-12 py-3 bg-[#FF4400] text-white rounded-lg hover:bg-[#F22D00]">
                结算
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '../store/cartStore'

const cartStore = useCartStore()
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
</style> 